// 导航样式 值-------------------------------START---------------------------------------------

$r: 45; //导航背景颜色 红色值
$g: 45; //导航背景颜色 绿色值
$b: 45; //导航背景颜色 蓝色值

//下划线颜色
$menu-border-color: #eeeeee;
//导航字体颜色
$menu-text-color: #ffffff;
//导航hover背景颜色 $primary-color
$menu-hover-background-color: rgba(255, 255, 255, 0.1);
//导航hover字体颜色
$menu-hover-text-color: #ffffff;
//导航激活背景颜色 $primary-color
$menu-active-background-color:rgba(255, 255, 255, 0.1);
//左侧导航激活字体颜色
$menu-active-text-color: #ffffff;

@function rgb($r, $g, $b, $args) {
  @return rgba($r - $args, $g - $args, $b - $args, 0.1);
}

$menu-background-color0: rgb($r, $g, $b, 0); //导航背景颜色  0 级
$menu-background-color1: rgb($r, $g, $b, 20); //导航背景颜色 1级
$menu-background-color2: rgb($r, $g, $b, 40); //导航背景颜色 2级
$menu-background-color3: rgb($r, $g, $b, 80); //导航背景颜色 3级
$menu-background-color4: rgb($r, $g, $b, 100); //导航背景颜色 4级
$menu-background-color5: rgb($r, $g, $b, 120); //导航背景颜色 5级
$menu-background-color6: rgb($r, $g, $b, 140); //导航背景颜色 6级

//------------------------------------END--------------------------------------------

// 设置导航样式 ---------------START---------------------------------------------------------------

.HomeWin-start-left {
  background-color: $menu-background-color0;
}

.el-menu {
  background-color: $menu-background-color0;
  border-right: none;




  // 0级菜单背景颜色
  & .el-menu-item.el-menu-children0,
  & .el-submenu.el-menu-children0 .el-submenu__title {
    background-color: $menu-background-color0;
  }

  // 1级菜单背景颜色
  & .el-menu-item.el-menu-children1,
  & .el-submenu.el-menu-children1 .el-submenu__title {
    background-color: $menu-background-color1;
  }

  // 2级菜单背景颜色
  & .el-menu-item.el-menu-children2,
  & .el-submenu.el-menu-children2 .el-submenu__title {
    background-color: $menu-background-color2;
  }

  // 3级菜单背景颜色
  & .el-menu-item.el-menu-children3,
  & .el-submenu.el-menu-children3 .el-submenu__title {
    background-color: $menu-background-color3;
  }

  // 4级菜单背景颜色
  & .el-menu-item.el-menu-children4,
  & .el-submenu.el-menu-children4 .el-submenu__title {
    background-color: $menu-background-color4;
  }

  // 5级菜单背景颜色
  & .el-menu-item.el-menu-children5,
  & .el-submenu.el-menu-children5 .el-submenu__title {
    background-color: $menu-background-color5;
  }

  // 6级菜单背景颜色
  & .el-menu-item.el-menu-children6,
  & .el-menu-children6 .el-submenu.el-menu-children6 .el-submenu__title {
    background-color: $menu-background-color6;
  }

  // 设置导航背景颜色和字体颜色
  & .el-menu-item,
  & .el-submenu__title {
    background-color: $menu-background-color0;
    color: $menu-text-color;
  }

  // 设置导航图标颜色
  & .el-menu-item i,
  & .el-submenu__title i {
    color: #ffffff;
  }

  // 设置导航右边的小箭头图标颜色
  & .el-submenu__title>i {
    color: $menu-text-color;
  }

  // 设置导航hover时图标颜色
  & .el-menu-item:hover i,
  & .el-submenu .el-submenu__title:hover i {
    color: #ffffff;
  }

  //设置导航hover时背景颜色和字体颜色
  & .el-menu-item:hover,
  & .el-submenu .el-submenu__title:hover {
    background: $menu-hover-background-color;
    color: $menu-hover-text-color;
  }

  //设置导航激活时图标颜色
  & .el-menu-item.is-active i {
    color: #ffffff;
  }

  // 设置导航激活时背景颜色和字体颜色
  & .el-menu-item.is-active {
    background-color: $menu-active-background-color;
    color: $menu-active-text-color;
  }
}

//--------------------------------END-------------------------------------------------------------